<script setup lang="ts">
import {useSettingsStore} from "@/store/modules/settings";
import {computed, onMounted, reactive, watchEffect} from "vue";
import {getLunar} from 'chinese-lunar-calendar';

const settingsStore = useSettingsStore();
const time = computed(() => settingsStore.baseConfig.time);
// 日期信息
interface DateInfo {
  //农历
  lunarDate: string;
  //月
  month: string;
  //日
  date: string;
  //周
  dayOfWeek: string;
  //12小时
  hh: string;
  //24小时
  h24: string;
  //分钟
  mm: string;
  //秒
  ss: string;
}
//初始化
onMounted(()=>{
  getCurrentTime();
})
const state = reactive({
  now: {} as DateInfo,
});
//一秒一更新
watchEffect(() => {
  setInterval(() => {
    getCurrentTime();
  }, 1000);
});

/**
 * 获取当前时间
 */
const getCurrentTime = () => {
  const now = new Date();

// 定义中文星期几的映射
  const chineseWeekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

  const lunarDate = getLunar(now.getFullYear(), now.getMonth() + 1, now.getDate()).dateStr;
  state.now = {
    lunarDate: lunarDate,
    month: s(now.getMonth() + 1),
    date: s(now.getDate()),
    dayOfWeek: chineseWeekdays[now.getDay()],
    hh: s(now.getHours() % 12 || 12),
    h24: s(now.getHours()),
    mm: s(now.getMinutes()),
    ss: s(now.getSeconds()),
  } as DateInfo;
};
const s = (v: number) => {
  if (v < 10) {
    return '0' + v;
  }
  return v;
}

</script>

<template>
  <div class="app-date-box" v-if="time.show">
    <div class="app-time" :style="{'font-size':time.size+'px' ,
        'color':time.color ,
        'font-family':time.font ,
        'font-weight':time.fontWeight ,
        }">
      <time class="hh">{{ state.now.h24 }}</time>
      <span class="colon hh">:</span>
      <time class="mm">{{ state.now.mm }}</time>
      <span v-if="time.sec" class="colon" style="display: var(--time-sec);">:</span>
      <span v-if="time.sec" class="sec">{{ state.now.ss }}</span>
    </div>
    <div class="app-date">
      <span class="time-month">{{ state.now.month }}月{{state.now.date}}日</span>
      <span class="time-week"> {{ state.now.dayOfWeek }} </span>
      <span class="time-lunar">{{ state.now.lunarDate }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">

.app-date-box {
  margin-top: 60px;
  font-size: 14px;
  display: block;
  width: 100%;
  color: rgb(157, 229, 254);

  .app-date {
    width: 100%;
    display: inline-block;
    text-align: center;
    span{
      padding: 5px;
    }
  }

  .app-time {
    color-scheme: none !important;
    font: inherit;
    //color: rgb(157, 229, 254);
    //font-size: 48px;
    //font-family: Expansiva;
    user-select: none;
    //font-weight: 600;
    text-shadow: 0 2px 6px rgb(0 0 0 / 16%);
    display: inline-block;
    text-align: center;
    line-height: 48px;
    width: 100%;
    transition: font .2s;
  }
}

</style>
